{% extends 'globalPage.html' %}
<title>{% block title %}云学习平台{% endblock %}</title>
{% block body %}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" style="padding: 0;" href="{% url 'home' %}"><img style="height: 50px;"
                                                                                         src="/static/image/logo.png"
                                                                                         alt="Band"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{% url 'home' %}">首页</a></li>
                    <li class="active"><a href="{% url 'courses' 'firstGrade' 'allCourses' 1 %}">课程</a></li>
                </ul>
                <form class="navbar-form navbar-left" action="{% url 'search' %}" method="get">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search" name="searchContent">
                    </div>
                    <button type="submit" class="btn btn-default">🔍</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    {% if user.is_authenticated %}
                        <li><a href="javascript:;" style="margin-top: 5px">你好，{{ user.first_name }}</a></li>
                        <li class="dropdown">
                            <a id="dLabel" data-target="#" href="javascript:;" data-toggle="dropdown"
                               role="button" aria-haspopup="true" aria-expanded="false">
                                <img class="img-circle" src="/static/image/Head.jpg" alt="head"
                                     style="height: 30px;">
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <li><a href="{% url 'personalCenter' %}" style="text-align: center">个人中心</a></li>
                                <li><a href="{% url 'history' %}" style="text-align: center">播放历史</a></li>
                                <li><a href="{% url 'logout' %}" style="text-align: center">退出登陆</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="{% url 'login' %}">登陆/注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    <div class="row grade_content">
        <div class="container">
            {% for item in grade %}
                {% if item.gradeurl == grade_url %}
                    <a class="col-md-1 gardeChange"
                       href="{% url 'courses' item.gradeurl 'allCourses' 1 %}">{{ item.gradename }}</a>
                {% else %}
                    <a class="col-md-1 grades"
                       href="{% url 'courses' item.gradeurl 'allCourses' 1 %}">{{ item.gradename }}</a>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div class="container" style="margin: 20px auto;">
        <ul class="nav nav-tabs">
            {% if subject == "allCourses" %}
                <li role="presentation" class="active"><a href="{% url 'courses' grade_url 'allCourses' 1 %}">全部</a>
                </li>
            {% else %}
                <li role="presentation"><a href="{% url 'courses' grade_url 'allCourses' 1 %}">全部</a></li>
            {% endif %}
            {% for course in courses %}
                {% if course.courseurl == subject %}
                    <li role="presentation" class="active"><a
                            href="{% url 'courses' grade_url course.courseurl 1 %}">{{ course.coursename }}</a></li>
                {% else %}
                    <li role="presentation"><a
                            href="{% url 'courses' grade_url course.courseurl 1 %}">{{ course.coursename }}</a></li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>

    <div id="courses_main" class="courses_main" style="min-height: 550px">
        {% csrf_token %}
    </div>
{% endblock %}
{% block jsOfPage %}
    <script>
        function allCourses() {
            var grade_url = "{{ grade_url }}";
            var subject = "{{ subject }}";
            var page = "{{ page }}";
            $.ajax({
                url: "/courses/" + grade_url + "/" + subject + "/" + page + "/",
                type: "POST",
                data: {
                    "csrfmiddlewaretoken": $('input[name="csrfmiddlewaretoken"]').val()
                },
                success: function (data) {
                    $("#courses_main").html(data);
                }
            })
        }

        allCourses();


    </script>
{% endblock %}